Skip to content

fix(vue-table): render nothing for an empty string cell - #6590

Open
Yash121l wants to merge 1 commit into
TanStack:mainfrom
Yash121l:fix/vue-flexrender-empty-string
Open

fix(vue-table): render nothing for an empty string cell#6590
Yash121l wants to merge 1 commit into
TanStack:mainfrom
Yash121l:fix/vue-flexrender-empty-string

Conversation

@Yash121l

Copy link
Copy Markdown

🎯 Changes

Fixes #6077.

flexRender passes primitives straight through, so a cell or header whose value is an empty string produces an empty text vnode. Vue's server renderer emits nothing for it while the client creates a text node, so hydration reports Hydration children mismatch inside the <td>.

flexRender now returns null for an empty string, in both the direct path and the path that runs a render function, which is how it already treats null and undefined. React's flexRender does not have this problem because React renders an empty string as nothing on both the server and the client, so this brings the Vue adapter in line with it.

The new test at packages/vue-table/tests/unit/flexRenderHydration.test.ts renders a one-cell table with renderToString, hydrates a client app into that markup and asserts no hydration warning is logged. On main it fails with [Vue warn]: Hydration children mismatch on.

@tanstack/vue-table passes test:lib, test:types, test:eslint, test:build and build. pnpm test:pr passes for all 41 affected projects, and the affected Vue example e2e suites pass.

✅ Checklist

  • I have followed the steps in the Contributing guide.
  • I have tested code changes locally with pnpm test and pnpm test:e2e, or these tests do not apply to this pull request.
  • I fully understand the code in this pull request, including any code generated with AI assistance.

🚀 Release Impact

  • This change affects published code, and I have generated a changeset.
  • This change is docs/CI/dev-only (no release).

flexRender returns the value it is given for primitives, so a cell or header whose value is an empty string produces an empty text vnode. Vue's server renderer emits nothing for it, the client creates a text node, and hydration reports a children mismatch inside the cell.

Return null for an empty string, matching how flexRender already treats null and undefined, so server and client agree.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Vue] Hydration error in FlexRender when column is an empty string

1 participant